<!DOCTYPE html>
<html lang="zh">
<head>
    #@header()
    #set(isAdd = product == null ? true : false, isEdit = !isAdd)
</head>
<style>
    .layui-upload-list{
        width:90px;
        height:auto;
        display:inline-block;
        vertical-align:top;
        position:relative;
        margin:5px 10px 5px 0;
    }
    .checkbox-inline-select{
        line-height:20px;
    }
    .checkbox-inline-select input{
        width:15px;
        height:15px;
        display:inline-block;
        vertical-align:-3px;
        margin:0;
    }
    .checkbox-inline-select span{
        display:inline-block;
        vertical-align:top;
    }
    .layui-upload-img{
        width:90px;
        height:90px;
        border-radius:5px;
        overflow:hidden;
        position:relative;
        border:1px solid #eeeeee;
    }
    .layui-upload-img img{
        display:block;
        width:100%;
        height:auto;
        position: absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
    }
    .delete{
        color:#ff0000;
        font-size:14px;
        position:absolute;
        right:5px;
        top:5px;
        width:20px;
        height:20px;
        background:url(/a/assets/static/img/icon_fail.png) no-repeat center center/20px auto;
        z-index:1;
    }
</style>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-role-add">
        <input hidden name="id" value="#(product.id??)">

        <div class="form-group">
            <label class="col-sm-3 control-label">titles：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="titles" id="titles" value="#(product.titles??)">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">keywords：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="keywords" id="keywords" value="#(product.keywords??)">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">description：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="description" id="description" value="#(product.description??)">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label is-required">标题：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="title" value="#(product.title??)" required>
            </div>
        </div>


        <div class="form-group">
            <label class="col-sm-3 control-label is-required">二级标题：</label>
            <div class="col-sm-8">
                <textarea name="subtitle"  class="form-control"  placeholder="请输大事件" style="height: 100px">#(product.subtitle??)</textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label is-required">产品分类：</label>
            <div class="col-sm-8">
                <select class="form-control noselect2 selectpicker" name="type">
                    <option value="1" #if(product != null && product.type == 1) selected #end>光学世界</option>
                    <option value="2" #if(product != null && product.type == 2) selected #end>精细化工</option>
                    <option value="3" #if(product != null && product.type == 3) selected #end>新能源材料</option>
                    <option value="4" #if(product != null && product.type == 4) selected #end>新兴半导体</option>
                    <option value="5" #if(product != null && product.type == 5) selected #end>LCP系列</option>
                </select>
            </div>
        </div>

<!--        <div class="form-group">
            <label class="col-sm-3 control-label is-required">封面图：</label>
            <div class="col-sm-8">
                <input type="file" id="filepath" name="filepath">
                <img class="layui-upload-img" id="showImg" src="#(prj)#(product.cover_img??)" >
            </div>
        </div>-->

        <div class="form-group">

            <label class="col-sm-3 control-label is-required">封面图：</label>
            <div class="col-sm-8">
                <div class="fileinput fileinput-new" data-provides="fileinput">
                    <div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
                        <img src="#(prj)#(product.cover_img??)"style="width: 140px; height: 140px;">
                    </div>
                    <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                    <div>
                        <span class="btn btn-white btn-file">
                            <span class="fileinput-new">选择图片</span>
                            <span class="fileinput-exists">更改</span>
                            <input type="file" id="filepath" name="filepath">
                        </span>
                        <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                    </div>
                </div>
            </div>
        </div>


        <div class="form-group">
            <label class="col-sm-3 control-label">详情图：</label>
            <div class="col-sm-8">
                <input type="file" multiple id="filepath1" name="filepath">
                <div id="multImg">
                    #if(product !=null && product.imgList != null)
                        #for(x : product.imgList)
                        <div class="layui-upload-listsss">
                            <div class="layui-upload-img">
                                <img sour="#(x)" src="#(prj)#(x)" name="pic">
                                <a class="delete" name="del"></a>
                            </div>
                            <label class="checkbox-inline-select">
                                <input class="input" value="#(x)" #if(product.cover_img == x)) checked  #end type="radio" name="fm" >
                                <span>设为封面</span>
                            </label>
                        </div>
                        #end
                    #end
                </div>
            </div>
        </div>


<!--        <div class="form-group">
            <label class="col-sm-3 control-label is-required">联系人：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="linkman" value="#(product.linkman??)" required>
            </div>
        </div>-->

        <div class="form-group">
            <label class="col-sm-3 control-label" is-required>邮箱：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="email" value="#(product.email??)" required>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">排序：</label>
            <div class="col-sm-8">
                <input class="form-control" type="number" name="sort" id="sort" value="#(product.sort??0)">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">简述：</label>
            <div class="col-sm-8">
                <textarea name="title" id="sketch" >#(product.sketch??)</textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">产品概述：</label>
            <div class="col-sm-8">
                <textarea name="title" id="summarize" >#(product.summarize??)</textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">产品优势：</label>
            <div class="col-sm-8">
                <textarea name="title" id="advantage" >#(product.advantage??)</textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">产品客户：</label>
            <div class="col-sm-8">
                <textarea name="title" id="cooperator" >#(product.cooperator??)</textarea>
            </div>
        </div>

    </form>
</div>
#@footer()
<script type="text/javascript">
    $(document).ready(function () {

        UE.getEditor('sketch', {
            //关闭字数统计
            autoFloatEnabled:false,
            initialFrameHeight:535,
            initialFrameWidth:'100%px',
            wordCount: false,
            //关闭elementPath
            autoHeightEnabled: true,
            elementPathEnabled: false,
        });

        UE.getEditor('summarize', {
            //关闭字数统计
            autoFloatEnabled:false,
            initialFrameHeight:535,
            initialFrameWidth:'100%px',
            wordCount: false,
            //关闭elementPath
            autoHeightEnabled: true,
            elementPathEnabled: false,
        });

        UE.getEditor('advantage', {
            //关闭字数统计
            autoFloatEnabled:false,
            initialFrameHeight:535,
            initialFrameWidth:'100%px',
            wordCount: false,
            //关闭elementPath
            autoHeightEnabled: true,
            elementPathEnabled: false,
        });

        UE.getEditor('cooperator', {
            //关闭字数统计
            autoFloatEnabled:false,
            initialFrameHeight:535,
            initialFrameWidth:'100%px',
            wordCount: false,
            //关闭elementPath
            autoHeightEnabled: true,
            elementPathEnabled: false,
        });
    })

    $("#form-role-add").validate({
        rules: {
            title: {
                required: true,
                minlength: 1
            },
            subtitle: {
                required: true,
                minlength: 1
            },

            sort: {
                required: true,
                minlength: 1,
            },

            email: {
                required: true,
                email: true
            },

            onkeyup: true,
        },
        messages: {
            "roleName": {
                remote: "角色名称已经存在"
            },
            "roleKey": {
                remote: "角色权限已经存在"
            }
        },
        focusCleanup: true
    });


    var uurl = "";
    #if(isAdd)
        uurl = "#(prj)/admin/product/save";
    #else
    uurl = "#(prj)/admin/product/update";
    #end

    function submitHandler() {
        layer.load(2, {shade: [0.1, '#fff']})

        if ($.validate.form()) {
            #(isAdd ? 'add()' : 'edit()')
        }else{
            layer.closeAll();
        }

    }

    function #(isAdd ? 'add()' : 'edit()') {
        var formData = new FormData();
        formData.append("product.titles",$("input[name='titles']").val())
        formData.append("product.keywords",$("input[name='keywords']").val())
        formData.append("product.description",$("input[name='description']").val())

        formData.append("product.title",$("input[name='title']").val())
        formData.append("product.subtitle",$("textarea[name='subtitle']").val())
        //formData.append("product.linkman",$("input[name='linkman']").val())
        formData.append("product.email",$("input[name='email']").val())
        formData.append("product.type",$("select[name='type']").val())
        formData.append("product.sort",$("input[name='sort']").val())

        formData.append('product.sketch',UE.getEditor('sketch').getContent())
        formData.append('product.summarize',UE.getEditor('summarize').getContent())
        formData.append('product.advantage',UE.getEditor('advantage').getContent())
        formData.append('product.cooperator',UE.getEditor('cooperator').getContent())

        formData.append('filepath', document.getElementById('filepath').files[0])
        formData.append('formKey', formKey())

        #if(isEdit)
        formData.append("product.id",$("input[name='id']").val())
        #end

        $.ajax({
            url:uurl,
            type: "post",
            data: formData,
            contentType: false,
            processData: false,
            async: false,
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                $.operate.successCallbackMsg(data.msg);
            }
            , complete: function (ret) {
                layer.load(2, {time: 1});
            }
        });
    }

    //图片回显
    $("#filepath").bind("change", function () {
        var fils = $("#filepath").get(0).files[0];
        $("#showImg").attr("src", window.URL.createObjectURL(fils))
    })

    //图片回显
    $("#filepath1").bind("change", function () {
        var fils = $("#filepath1").get(0).files[0];
        $("#showImg1").attr("src", window.URL.createObjectURL(fils))
    })

</script>
</body>
</html>
